<template>
  <v-card>
    <v-card-title>
      <v-icon left>mdi-cached</v-icon>
      缓存管理
    </v-card-title>
    
    <v-card-text>
      <v-row>
        <v-col cols="12" md="6">
          <v-card variant="outlined">
            <v-card-title class="text-h6">
              <v-icon left color="primary">mdi-menu</v-icon>
              菜单和路由缓存
            </v-card-title>
            <v-card-text>
              <p class="text-body-2 mb-4">
                清除菜单和路由缓存，适用于菜单权限变更后需要刷新的情况
              </p>
              <v-btn
                color="warning"
                :loading="loading"
                @click="clearMenuCache"
                class="mr-2 mb-2"
              >
                <v-icon left>mdi-delete</v-icon>
                清除缓存
              </v-btn>
              <v-btn
                color="primary"
                :loading="loading"
                @click="reloadMenus"
                class="mb-2"
              >
                <v-icon left>mdi-refresh</v-icon>
                重新加载
              </v-btn>
            </v-card-text>
          </v-card>
        </v-col>
        
        <v-col cols="12" md="6">
          <v-card variant="outlined">
            <v-card-title class="text-h6">
              <v-icon left color="success">mdi-book-open-variant</v-icon>
              字典缓存
            </v-card-title>
            <v-card-text>
              <p class="text-body-2 mb-4">
                清除字典缓存，适用于字典数据更新后需要刷新的情况
              </p>
              <v-btn
                color="warning"
                @click="clearDictCache"
                class="mb-2"
              >
                <v-icon left>mdi-delete</v-icon>
                清除字典缓存
              </v-btn>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
      
      <v-row class="mt-4">
        <v-col cols="12">
          <v-card variant="outlined">
            <v-card-title class="text-h6">
              <v-icon left color="error">mdi-delete-sweep</v-icon>
              批量操作
            </v-card-title>
            <v-card-text>
              <p class="text-body-2 mb-4">
                一键清除所有系统缓存（不包括用户登录信息）
              </p>
              <v-btn
                color="error"
                @click="clearSystemCache"
                class="mb-2"
              >
                <v-icon left>mdi-delete-sweep</v-icon>
                清除所有系统缓存
              </v-btn>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
      
      <v-row class="mt-4">
        <v-col cols="12">
          <v-card variant="outlined">
            <v-card-title class="text-h6">
              <v-icon left color="info">mdi-information</v-icon>
              缓存状态
            </v-card-title>
            <v-card-text>
              <v-btn
                color="info"
                variant="outlined"
                @click="refreshCacheStatus"
                class="mb-4"
              >
                <v-icon left>mdi-refresh</v-icon>
                刷新状态
              </v-btn>
              
              <v-list>
                <v-list-item
                  v-for="(status, key) in cacheStatus"
                  :key="key"
                  :prepend-icon="status ? 'mdi-check-circle' : 'mdi-close-circle'"
                  :color="status ? 'success' : 'error'"
                >
                  <v-list-item-title>{{ key }}</v-list-item-title>
                  <v-list-item-subtitle>
                    {{ status ? '已缓存' : '未缓存' }}
                  </v-list-item-subtitle>
                </v-list-item>
              </v-list>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCache } from '@/composables/useCache'

const {
  loading,
  clearMenuCache,
  reloadMenus,
  clearDictCache,
  clearSystemCache,
  getCacheStatus
} = useCache()

const cacheStatus = ref<Record<string, boolean>>({})

const refreshCacheStatus = () => {
  cacheStatus.value = getCacheStatus()
}

onMounted(() => {
  refreshCacheStatus()
})
</script>

<style scoped>
.v-card {
  margin-bottom: 16px;
}
</style> 